<template>
  <div class="index">
    <map-chart class="map-container"></map-chart>
    <div class="top-left">
      <sales-line-chart></sales-line-chart> <!-- 确保折线图在这里 -->
    </div>
    <div class="top-row">
      <sales-pie-chart></sales-pie-chart>
    </div>
    <div class="bottom-right">
      <rental-pie-chart></rental-pie-chart>
    </div>
    <div class="bottom-row">
      <bar-chart></bar-chart>
    </div>
  </div>
</template>


<script>
import MapChart from '../components/Breadcrumb/MapChart.vue';
import RentalPieChart from '../components/Breadcrumb/RentalPieChart.vue';
import BarChart from '../components/Breadcrumb/BarChart.vue';
import SalesPieChart from '../components/Breadcrumb/SalesPieChart.vue';
import SalesLineChart from '../components/Breadcrumb/SalesLineChart.vue'; // 导入折线图组件

export default {
  components: {
    MapChart,
    RentalPieChart,
    BarChart,
    SalesLineChart,
    SalesPieChart // 注册折线图组件
  }
}
</script>
<style scoped>
.index {
  display: grid;
  grid-template-columns: 2.0fr 3.5fr 1.5fr; /* 列配置，根据实际需要可能稍作调整 */
  grid-template-rows: 50% 50%; /* 两行配置 */
  height: 95vh;
  width: 95vw;
  margin: 0 auto;
}

.map-container {
  grid-column: 2; /* 中间列 */
  grid-row: 1 / 3; /* 跨两行 */
}

.top-left {
  grid-column: 1; /* 左侧第一列 */
  grid-row: 1; /* 第一行 */
  display: flex;
  align-items: center;
  justify-content: center;
  
}

.top-row {
  grid-column: 3; /* 右侧第一列 */
  grid-row: 1;
}

.bottom-right {
  grid-column: 3;
  grid-row: 2;
}

.bottom-row {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  justify-content: space-around;
  align-items: center;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
}
</style>
